<template>
    <div :id="id" class="box-wrap" @mouseover="textMouseover" @mouseout="textMouseout">
        <div :id="window.getRootName() + id" class="marquee-wrap">
            <span v-html="element.data.text" :style="{ letterSpacing: element.style.letterSpacing + 'px' }"></span>
        </div>
    </div>
</template>

<script>
import register from '@/js/main/register.js';
import JQuery from 'jquery';

export default {
    data() {
        return {
            window: window,
            param: {}
        };
    },
    created() {
        register.addComponent(this);
    },
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        }
    },
    methods: {
        textMouseover() {
            JQuery(`#${window.getRootName()}${this.id}`).stop(true);
        },
        textMouseout() {
            this.startAnimate();
        },
        start() {
            this.param = {};
            let boxPx = this.element.style.width.pixel;
            let textLenPx = JQuery(`#${window.getRootName()}${this.id}`).width();
            let direction = this.element.attribute.direction ? this.element.attribute.direction : 'left';
            if (direction === 'left' || direction === 'right') {
                this.param[direction] = textLenPx < boxPx ? -boxPx + 'px' : -(textLenPx + boxPx) + 'px';
            } else if (direction === 'top' || direction === 'bottom') {
                boxPx = JQuery(`#${this.id}`).height();
                this.param[direction] = -boxPx + 'px';
            }
            JQuery(`#${window.getRootName()}${this.id}`).removeAttr('style');
            JQuery(`#${window.getRootName()}${this.id}`).attr('style', `${direction}:${boxPx}px`);
            this.startAnimate();
        },
        startAnimate() {
            let _this = this;
            JQuery(`#${window.getRootName()}${this.id}`).animate(this.param, +this.element.attribute.scrollamount, 'linear', function() {
                _this.start();
            });
        }
    },
    mounted() {
        this.start();
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang='scss' scoped>
.box-wrap {
    position: relative;
    overflow: hidden;
}
.marquee-wrap {
    position: absolute;
    height: 100%;
    white-space: nowrap;
}
</style>